#3DModel #ThreejsTutorial #WebDesign

Add 3D Model to WebSite in 5 Minutes - Three.js Tutorial

240,942 views240K views

May 28, 2019

161K subscribers

How to add 3D model with 360 degrees view on website with JavaScript and Three.js in 5 minutes! Source Code: https://redstapler.co/add-3d-model-to... Three.js Crash Course: https://youtu.be/uzkedMF-l4Q GLTFLoader.js: https://git.io/fjRPL OrbitControl.js: https://git.io/fjRPt Car Model: https://skfb.ly/6HpEG === Follow us on === Facebook: https://www.facebook.com/theRedStapler Website: http://redstapler.co/ Twitter: https://twitter.com/redStapler_twit #3DModel #ThreejsTutorial #WebDesign

Show more

Abażur

could you make a whole series about three js ?

Omar

From beginner to advanced. I would definitely be watching them all!

Kaybe - Cryptosphere

Here for ya bra: https://www.youtube.com/watch?v=ABV1mK1CGOY

Abażur

but its very basic

Bram Stultjens

I love the Christmas piano music in the background

Promise

Bro, you took my development skills to the next level, thank you ♥️

Babu Gandhi

How to replace GLTFloader with OBJloader ? Please guide with the code for the same webpage

Ozosh Maharjan

2 years ago (edited)

Ooooohhhhh thank you so much. I needed this. 😊

Matthew Tang

5 months ago (edited)

// For someone you start this tutorial after Jan 15, 2021 ; you may follow this update on the lines of codes. // I have put 3 lines of codes form the bottom to line 22-24 as to define the "renderer.domElement" // I have updated line 27 and added "renderer.domElement", as it's required based on the the document. // This is the first time for a marketer to try new fancy techs, pls let me know if this can help. Thanks all :D ! <!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <script src="three.min.js"></script> <script src="GLTFLoader.js"></script> <script src="OrbitControls.js"></script> <script> let scene, camera, renderer; function init() { scene = new THREE.Scene(); scene.background = new THREE.Color(0xdddddd); camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000); camera.rotation.y = 45/180*Math.PI; camera.position.x = 800; camera.position.y = 100; camera.position.z = 1000; renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement); controls = new THREE.OrbitControls(camera,renderer.domElement); controls.addEventListener('change', renderer); hlight = new THREE.AmbientLight (0x404040,100); scene.add(hlight); directionalLight = new THREE.DirectionalLight(0xffffff,100); directionalLight.position.set(0,1,0); directionalLight.castShadow = true; scene.add(directionalLight); light = new THREE.PointLight(0xc4c4c4,10); light.position.set(0,300,500); scene.add(light); light2 = new THREE.PointLight(0xc4c4c4,10); light2.position.set(500,100,0); scene.add(light2); light3 = new THREE.PointLight(0xc4c4c4,10); light3.position.set(0,100,-500); scene.add(light3); light4 = new THREE.PointLight(0xc4c4c4,10); light4.position.set(-500,300,500); scene.add(light4); let loader = new THREE.GLTFLoader(); loader.load('scene.gltf', function(gltf){ car = gltf.scene.children[0]; car.scale.set(0.5,0.5,0.5); scene.add(gltf.scene); animate(); }); } function animate() { renderer.render(scene,camera); requestAnimationFrame(animate); } init(); </script> </body> </html>

Read more

View 11 replies

Dawid Furdzik

Thank you sir. One more question, how to do dynamic 3d model? I mean, input on website few parameters and output 3d model, something like online product configurator is it possible?

Read more

Bruh Bruh

One of favourite web development channel. Thank u so much.

Pavel Arseyev

thanks a lot! This video helped me so much!

aLuuffySV

Great stuff, is there a way to add customization option to the model? i.e, have colors change and stuff while the model is being panned/rotated around?

Camilo Laiton

Hi, thank you! Great tutorial. I have a question, any of you guys know how to add text on a 3d model in threejs? I would really appreciate if someone helps me with that.

John Gearhart

God-sent tutorial!!! made mine work!

Catherine Liu

great tutorial!!!!! hope more to come!!!

Ricardo Siabato

7 months ago (edited)

awesome! you could integrate an example of these into a real site!Saludos desde Colombia! :)

apoorvareddy

can we upload a 3D model and add different functions to different parts of the model?

Александр Андреев

You are awesome! Thank you for lesson, from Moscow :)

iammikedeleon

How can I add the 3D on WP? Can you share some tutorials to it?

Shreeram VT

Can we do selection on a specific portion in the 3D model, is that possible via three.js? Eg: I select the eye, nose, ears and like that?

Todor Pavlovic

Great man !

Everest Gjonaj

Looking down for more threejs tutorials.